import { StyleSheet, TouchableWithoutFeedback } from 'react-native'
import { Text, View, Image } from 'native-base'
import React from 'react'
import { getDomain } from '../utils/tools'
import { addStyles } from '../utils/tools'

const IconBox = ({ data, onPress, style }) => {
  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <View style={addStyles(styles.iconBox, style)}>
        <Image style={styles.icon} source={{ uri: getDomain(data.icon) }} alt="icon"></Image>
        <Text>{data.name}</Text>
      </View>
    </TouchableWithoutFeedback>
  )
}

export default IconBox

const styles = StyleSheet.create({
  iconBox: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    width: '22%',
    height: 80,
    marginBottom: 10
  },
  icon: {
    width: 50,
    height: 50,
    borderRadius: 25
  }
})